<!--
*@Author: QWP
*@Description: 选择快捷功能
*@Date: 2023-07-13 09:40:07
-->
<template>
  <u-dialog v-bind="$attrs"
    
    custom-class="u-set-fast-form clear"
    :loading="loading"
    @submit="submit"
    @close="dialogClose">
    <div class="s-bg-white" style="padding: 8px">
      <u-table :columns="columns"
        :data="tabData" 
        v-loading="loading"
        style="height: calc(70vh - 20px)"
        @link="link"/>
    </div>
  </u-dialog>
</template>
<script>
import fastMenuS from '@/service/index/fast_menu.service.js'
import { alertC, jsonCopy } from '@/util/common';
import { originFMData } from '@/views/index/component/fastMenuSet/data.js'
export default {
  props: {
    // 当前显示的快捷菜单
    data: {
      type: Array,
      default: () => []
    }
  },
  components: {
  },
  data () {
    return {
      loading: false,
      tabData: [],
      columns: [
        {label: '序号', width: 60, align: 'center', type: 'index'},
        {label: '图标', width: 130, align: 'center', key: 'icon', ctype: 'html'},
        {label: '快捷功能名称', minWidth: 130, align: 'center', key: 'title',},
        {label: '设置为快捷功能', width: 130, align: 'center', key: 'isFast', ctype: 'switch',
          inactiveValue: false, activeValue: true,
        },
        {label: '上移', width: 100, align: 'center', key: 'up1', icon: 'up'},
        {label: '下移', width: 100, align: 'center', key: 'down1', icon: 'down'},
      ]
    }
  },
  mounted() {},
  methods: {
    // 保存提交事件
    submit() {
      let sdata = jsonCopy(this.tabData).filter(item => item['isFast'] == true).map(i => i.mId);
      this.loading = true;
      fastMenuS.saveShortcuts(sdata).then(res => {
        this.loading = false;
        if(res.data.code == 0) {
          alertC(res.data.msg)
          this.$emit('success')
        }
        else {
          alertC(res.data.msg, "warning")
        }
      })
      .catch(err => this.loading = false)
    },

    // 排序
    link(key, value, row) {
      let index = this.tabData.findIndex(item => item === row);
      if(key == "up1") {
        if(index != 0) {
          this.tabData.splice(index - 1, 0, row);
          let lastIndex = this.tabData.findLastIndex(item => item === row);
          this.tabData.splice(lastIndex, 1)
        }
      }
      else if(key == "down1") {
        if(index != this.tabData.length - 1) {
          this.tabData.splice(index + 2, 0, row);
          let fIndex = this.tabData.findIndex(item => item === row);
          this.tabData.splice(index, 1)
        }
      }
    },

    // 初始化原始数据
    initOriginData() {
      this.tabData = jsonCopy(originFMData);
      const menus = this.$store.getters['homeStore/getMenus'];
      this.tabData = this.tabData.filter(item => menus.some(o => o == item.path))
      this.tabData.forEach(item => {
        item.up = '<i class="el-icon-top"></i>';
        item.down = '<i class="el-icon-bottom"></i>';
      })
      this.data.forEach(item => {
        let index = this.tabData.findIndex(mItem => mItem['mId'] === item['mId']);
        if(index != -1) {
          this.tabData.splice(index, 1, {...this.tabData[index], isFast: true})
        }
      })
    },

    // 弹窗关闭
    dialogClose() {
      this.loading = false;
    }
  },
  watch: {
    '$attrs.show'(nval, oval) {
      if(nval == true) {
        this.initOriginData()
      }
    },
  }
}
</script>
<style lang='scss'>
.u-row-icon {
  display: inline-block; 
  width: 30px; 
  height: 30px
}
.u-set-fast-form {
  .el-icon-bottom, .el-icon-top {
    font-size: 20px;
    cursor: pointer;
  }
}
</style>